<template>
  <basic-container>
    <div class="add-content">
      <div class="left-content">
        <div class="left-top-content">
          <el-row :gutter="20">
            <span style="line-height: 32px;">表 名：</span>
            <el-col :span="8">
              <el-input v-model="quterVal.crfName" />
            </el-col>
            <span style="line-height: 32px;">类 型:</span>
            <el-col :span="8">
              <el-select v-model="quterVal.crfType" placeholder="类 型">
                <el-option
                  v-for="item in crfTypeOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-col>
          </el-row>
        </div>
      </div>
      <div class="right-content"></div>
    </div>
  </basic-container>
</template>
<script setup>
import { useRoute } from 'vue-router';
import { ref, reactive } from 'vue';
const router = useRoute();
const quterVal = reactive(router.query || {});
quterVal.crfType = '';
const crfTypeOptions = reactive([
  { label: 'CRF', value: 'CRF' },
  { label: 'CRF-P', value: 'CRF-P' },
  { label: 'CRF-PP', value: 'CRF-PP' },
]);
</script>
<style lang="scss" scoped>
.add-content {
  width: 100%;
  height: calc(100vh - 166px);
  position: relative;
  .left-content {
    width: 30%;
    height: 100%;
    border-right: 1px solid #cdcdcd;
    .left-top-content{
      width: 100%;
      height: auto;
    }
  }
  .right-content {
    width: 60%;
    height: 100%;
  }
}
</style>